<template>
    <div>
        <ul class="project-ul">
            <li v-for="item in form_type_list" class="project-li">
                <div class="pic">
                    <img :src="item.icon" alt="" @click.stop="target(item)"/>
                </div>
                <span class="name">{{item.name}}</span>
            </li>
        </ul>
        <ul class="orders-ul">
            <li>
                <p>
                    <span>今日新增用户</span>
                    <Icon type="ios-arrow-forward" size="22"/>
                </p>
                <p>{{home_data.user_count_today}}</p>
                <p v-if='home_data.user_add_pre_type == 1'>
                    <span>+{{home_data.user_add_pre}}</span>
                    <Icon type="md-arrow-up" size="20" color="#FF4420"/>
                </p>
                <p v-if='home_data.user_add_pre_type == 0'>
                    <span style="color:#19BE6B">-{{home_data.user_add_pre}}</span>
                    <Icon type="md-arrow-down" size="20" color="#19BE6B"/>
                </p>
            </li>
            <li>
                <p>
                    <span>今日需求订单</span>
                    <Icon type="ios-arrow-forward" size="22"/>
                </p>
                <p>{{home_data.form_count_today}}</p>
                <p v-if='home_data.form_add_pre_type == 1'>
                    <span>+{{home_data.form_add_pre}}</span>
                    <Icon type="md-arrow-up" size="20" color="#FF4420"/>
                </p>
                <p v-if='home_data.form_add_pre_type == 0'>
                    <span style="color:#19BE6B">-{{home_data.form_add_pre}}</span>
                    <Icon type="md-arrow-down" size="20" color="#19BE6B"/>
                </p>
            </li>
            <li>
                <p>
                    <span>今日抢修订单</span>
                    <Icon type="ios-arrow-forward" size="22"/>
                </p>
                <p>{{home_data.task_count_today}}</p>
                <p v-if='home_data.task_add_pre_type == 1'>
                    <span>+{{home_data.task_add_pre}}</span>
                    <Icon type="md-arrow-up" size="20" color="#FF4420"/>
                </p>
                <p v-if='home_data.task_add_pre_type == 0'>
                    <span style="color:#19BE6B">-{{home_data.task_add_pre}}</span>
                    <Icon type="md-arrow-down" size="20" color="#19BE6B"/>
                </p>
            </li>
            <li>
                <p>
                    <span>今日租赁订单</span>
                    <Icon type="ios-arrow-forward" size="22"/>
                </p>
                <p>{{home_data.order_count_today}}</p>
                <p v-if='home_data.order_add_pre_type == 1'>
                    <span>+{{home_data.order_add_pre}}</span>
                    <Icon type="md-arrow-up" size="20" color="#FF4420"/>
                </p>
                <p v-if='home_data.order_add_pre_type == 0'>
                    <span style="color:#19BE6B">-{{home_data.order_add_pre}}</span>
                    <Icon type="md-arrow-down" size="20" color="#19BE6B"/>
                </p>
            </li>
        </ul>
        <div class="chart">
            <div class="chart-item">
                <div class="chart-son">
                    <p>本月新增用户走势</p>
                    <DatePicker type="date" v-model="user_time_date" placeholder="请选择日期" style="width: 180px;margin-top:20px;margin-right: 20px"></DatePicker>
                </div>
                <addUser :x_data="user_x_data" :y_data="user_y_data" v-if='user_x_data.length'>
                </addUser>
            </div>
            <div class="chart-item">
                <div class="chart-son">
                    <p>本月订单数量走势</p>
                    <div>
                        <DatePicker type="date" v-model="order_time_date" placeholder="请选择日期" style="width: 180px;margin-top:20px;margin-right: 20px"></DatePicker>
                    </div>
                </div>
                <orderNum :x_data="order_x_data" :y_data="order_y_data" v-if='order_x_data.length'>
                </orderNum>
            </div>
        </div>
    </div>
</template>

<script>
    import {homeFormTypeList, homeData, userChartsData, orderChartsData} from '@/api/main'
    import addUser from './add-user';
    import orderNum from './order-num';
    import Time from '@/tool/Time'
    export default {
        name: 'home',
        data() {
            return {
                form_type_list: [],
                home_data: {},
                user_x_data: [],
                user_y_data: [],
                order_x_data: [],
                order_y_data: [],
                user_time: 0,
                user_time_date: '',
                order_time: 0,
                order_time_date: ''
            }
        },
        components:{
            addUser,
            orderNum
        },
        watch: {
            'user_time_date': function () {
                this.user_time = Time.dateToTimestamp(this.user_time_date)
                this.user_x_data = []
                this.user_y_data = []
                this.userChartsData()
            },
            'order_time_date': function () {
                this.order_time = Time.dateToTimestamp(this.order_time_date)
                this.order_x_data = []
                this.order_y_data = []
                this.orderChartsData()
            }
        },
        methods:{
            target(item) {
                if (item.type == 1) {
                    if (item.code == 'zlsc') {
                        this.$router.push({name: 'order_list'})
                    } else {
                        this.$router.push({name: 'form_list', params: {code: item.code}})
                    }
                } else {
                    this.$router.push({name: 'task_repair_list'})
                }
            },
            userChartsData() {
                let obj = {}
                obj.user_time = this.user_time
                userChartsData(obj).then(res => {
                    if (res.code == 0) {
                        this.user_x_data = res.data.x_data
                        this.user_y_data = res.data.y_data
                        console.log(this.user_x_data)
                    }
                })
            },
            orderChartsData() {
                let obj = {}
                obj.order_time = this.order_time
                orderChartsData(obj).then(res => {
                    if (res.code == 0) {
                        this.order_x_data = res.data.x_data
                        this.order_y_data = res.data.y_data
                    }
                })
            }
        },
        mounted() {
            homeFormTypeList().then(res => {
                if (res.code == 0) {
                    this.form_type_list = res.data
                }
            })
            homeData().then(res => {
                if (res.code == 0) {
                    this.home_data = res.data
                }
            })
            this.userChartsData()
            this.orderChartsData()
        },
    }
</script>

<style lang="less" scoped>
    @import "/src/index.less";
    .chart{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 1556px;
        margin: 0 auto;
        padding-top: 33px;
        padding-bottom: 33px;
        .chart-item{
            width: 762px;
            height: 420px;
            background: rgb(76, 76, 76);
            box-shadow: 0 0 8px 0 rgba(66, 66, 66, 0.8);
            .chart-son{
                display: flex;justify-content: space-between;align-items: center;margin-left: 20px;
                &>p{
                    color:#fff;font-size: 20px;margin-top: 14px;
                }
                /deep/ .ivu-input{
                    font-size: 14px;
                }
            }
        }
    }
    .orders-ul {
        width: 1556px;
        margin: 0 auto;
        box-shadow: 0 0 8px 0 rgba(66, 66, 66, 0.8);
        padding-top: 48px;
        padding-bottom: 48px;
        margin-top: 34px;
        background: rgb(76, 76, 76);
        display: flex;
        justify-content: space-between;
        align-items: center;

        li {
            list-style: none;
            position: relative;
            width: calc(100% / 4);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            &:after {
                display: block;
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 1px;
                height: 66px;
                background: #E5E5E5;
            }

            &:last-child {
                &:after {
                    display: none;
                }
            }

            p {
                &:nth-of-type(1) {
                    display: flex;
                    align-items: center;

                    span {
                        font-size: 20px;
                        margin-right: 5px;
                    }
                }

                &:nth-of-type(2) {
                    font-size: 38px;
                    color: rgba(0, 138, 255, 1);
                    text-align: center;
                    padding: 5px 0;
                }

                &:nth-of-type(3) {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    span {
                        color: rgba(255, 68, 32, 1);
                        font-size: 20px;
                        margin-right: 8px;
                    }

                    .ivu-icon {
                        margin-top: -3px;
                    }
                }
            }
        }
    }

    .project-ul {
        width: 1556px;
        margin: 0 auto;
        box-shadow: 0 0 8px 0 rgba(66, 66, 66, 0.8);
        padding-left: 70px;
        padding-right: 70px;
        padding-top: 54px;
        padding-bottom: 59px;
        margin-top: 33px;
        background: rgb(76, 76, 76);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .project-li {
            float: left;
            list-style: none;
            cursor: pointer;

            &:hover {
                .pic {
                    img {
                        transform: scale(1.15);
                    }
                }
            }

            .pic {
                text-align: center;
                img {
                    width: 120px;
                    height: 120px;
                    -o-object-fit: contain;
                    object-fit: contain;
                    transition: 0.3s;
                }
            }

            .name {
                color: #fff;
                font-size: 25px;
                .one-line();
                display: block;
                text-align: center;
            }
        }
    }

    .home_page_wrapper {
        background: #fff;
        padding: 54px 44px;
    }

    @media screen and (max-width: 1542px) {
        .home_page_wrapper {
            .browse {
                width: 26%;
                margin-right: 7%;
            }
        }
    }

    .browse {
        width: 291px;
        height: 181px;
        text-align: center;
        float: left;
        margin-right: 89px;
        margin-bottom: 48px;
        border-radius: 5px;
        background: #4087FF;
        position: relative;
        overflow: hidden;

        &:before {
            position: absolute;
            border-radius: 50%;
            width: 240px;
            height: 240px;
            display: block;
            content: '';
            background: #75A6F9;
            top: -82%;
            left: 50%;
            transform: translateX(-50%);
        }

        .b1 {
            color: #F3F1F1;
            font-size: 18px;
            position: relative;
            z-index: 3;
            margin-top: 43px;
        }

        .b2 {
            font-size: 18px;
            color: #F3F1F1;
            margin-top: 42px;
            font-weight: 400;
            position: relative;
            z-index: 3;
        }
    }

    .count-style {
        font-size: 50px;
    }
</style>
